<template>
	<view class="good-list">
		<view class="u-cell-group">
			<view class="title">
				用章人：{{item.userName}}
			</view>
			<view>当前次数：{{item.useCount}}</view>
			<view>状态：
				<u-tag text="正常" type="success" v-if="item.error==0" size="mini"/>
				<u-tag text="异常" type="error" v-if="item.error==-1" size="mini"/>
				<u-tag text="警告" type="warning" v-if="item.error==1" size="mini"/>
			</view>
			<view v-if="item.errorMsg">异常信息：<u-tag :text="item.errorMsg" type="error" size="mini"/></view>
			<view>使用模式：
				<u-tag v-if="item.modelName" :text="item.modelName" type="success" size="mini"/>
				<u-tag v-else :text="$lizhao.computeType.getTypeName(item.type)" type="success" size="mini"/>
			</view>
			<view style="display: flex;">
				<text>上链凭证：</text>
				<view class="Uplink">{{item.blockchainCode}}</view> 
				<view><u-tag  v-if="item.blockchainCode" text="复制" type="success" size="mini" @click="copyHash(item.blockchainCode)"/></view>
			</view>
			<view>用章日期：{{item.realTime}}</view>
			<view>用章位置：{{item.location}}</view>
			<view class="flex-row" v-if="item.isCamera==true||item.isCamera==false">
				<text class="text">摄像头状态：</text>
				<u-tag :text="item.isCamera==true ? '开启': '关闭'" :type="item.isCamera==true ? 'success': 'warning'" size="mini"/>
			</view>
			<view>备注：{{item.remark}}</view>
			<view v-if="item.faceImgUrl">人脸图片：
				<u-image width="150rpx" height="150rpx" class="item-image" :src="item.faceImgUrl+'?Authorization='+userInfo.token+'&us=app&width=80'" @click="previewImge(item)"></u-image>
			</view>
			<view v-if="item.useInfos&&item.useInfos.length>0&&item.isCamera!=false">
				<view>盖章图片：</view>
				<view class="image-inline">
					<view  v-for="(imag,imagIndex) in item.useInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.useInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.useInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.temporaryInfos&&item.temporaryInfos.length>0&&item.isCamera!=false" >
				<view>临时图片：</view>
				<view class="image-inline error-item">
					<view v-for="(imag,imagIndex) in item.temporaryInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.temporaryInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.temporaryInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.passwordInfos&&item.passwordInfos.length>0&&item.isCamera!=false" >
				<view>密码图片：</view>
				<view class="image-inline error-item">
					<view v-for="(imag,imagIndex) in item.passwordInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.passwordInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.passwordInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.auditorInfos&&item.auditorInfos.length>0&&item.isCamera!=false">
				<view>审计图片：</view>
				<view class="image-inline" >
					<view v-for="(imag,imagIndex) in item.auditorInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.auditorInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.auditorInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.numoutInfos&&item.numoutInfos.length>0&&item.isCamera!=false">
				<view>超次图片：</view>
				<view  class="image-inline error-item">
					<view v-for="(imag,imagIndex) in item.numoutInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image"  width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.numoutInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.numoutInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.timeoutInfos&&item.timeoutInfos.length>0&&item.isCamera!=false">
				<view>按压超时：</view>
				<view  class="image-inline error-item">
					<view v-for="(imag,imagIndex) in item.timeoutInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.timeoutInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.timeoutInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="item.replenishInfos&&item.replenishInfos.length>0">
				<view>追加图片：</view>
				<view class="image-inline error-item">
					<view v-for="(imag,imagIndex) in item.replenishInfos" :key="imagIndex">
						<u-image v-if="imag.fileUrl&&imag.QSS" class="item-image" width="150rpx" height="150rpx" border-radius="10" src="../../../static/qss/jiemi.gif"></u-image>
						<view class="item-image-warp" v-else>
							<u-image class="item-image" width="150rpx" height="150rpx" border-radius="10" :src="computeImage(imag)" @click="previewImage(item.replenishInfos,imag,imagIndex)"></u-image>
							<image src="../../../static/image/icon/yuantu.png" class="Original" @click.stop="previewImage(item.replenishInfos,imag,imagIndex,'original')"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn">
				<u-button type="warning" size="mini" class="u-button" @click="tovoid(item)" v-if="item.error!=3">备注</u-button>
			</view>
		</view>
		<u-modal v-model="modal.show" title="备注" show-cancel-button async-close @confirm="modalConfirm" ref="uModal">
			<view class="slot-content">
				<u-input v-model="modal.value" type="textarea" border placeholder="请填写备注信息"/>
			</view>
		</u-modal>
		<qssAnimateGif ref="qssAnimateGif" style="z-index: 1000;"></qssAnimateGif>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	
	export default {
		computed: {
			...mapGetters(['userInfo', 'api']),
			computeImage(){
				return (imag)=>{
					if( imag.enType==3||imag.enType==4){
						return imag.fileUrl
					}else{
						return imag.fileUrl+'?Authorization='+this.userInfo.token+'&us=app&width=80'
					}
				}
			}
		},
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				modal: {
					show: false,
					value:'',
					infoId:'',
					obj:"",
				},
			}
		},
		mounted() {
			that = this
		},
		methods: {
			previewImge(row){
				if(row.faceImgUrl){
					uni.previewImage({
						urls: [row.faceImgUrl+'?Authorization='+this.userInfo.token+'&us=web']
					});
				}
			},
			copyHash(text){
				uni.setClipboardData({
				    data: text,
				    success: function () {
				        uni.showToast({
				        	title: '复制成功'
				        });
				    }
				});
			},
			tovoid(data){
				//console.log(data);
				this.modal.show=true
				this.modal.value=data.remark||''
				this.modal.infoId=data.id
				this.modal.obj=data
			},
			//点击弹框确认
			modalConfirm(){
				let req = {
					infoId: this.modal.infoId, //记录id
					remark: this.modal.value//作废原因
				};
				this.$u.post(that.api.GLOBAL_device_sealRecordInfo_customRemark, req).then(res => {
					this.$refs.uModal.clearLoading();
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon:"none"
						});
						this.modal.obj.remark=req.remark
						this.modal.show=false
					}
				});
			},
			//浏览图片
			previewImage(list,row,index,type){
				uni.$lizhao.seeBigImage.previewImage(list,row,index,type,this)
			}
		}

	}
</script>

<style lang="scss">
	.good-list {
		background-color: #fff;padding: 20rpx 15rpx;
		width: 100%;
		.u-cell-group {
			font-size: 28rpx;color: #888;line-height: 48rpx;
			box-sizing: border-box;width: 100%;
			display: flex;flex-direction: column;
			.Uplink{
				width: 450rpx;overflow: hidden;text-overflow: ellipsis;
			}
			.image-inline{
				display: flex;flex-wrap: wrap;
				.item-image-warp{
					position: relative;
					.item-image{margin-right: 10rpx;margin-bottom:10rpx;}
					.Original{position: absolute;right: 10rpx;bottom: 10rpx;width:50rpx; height:35rpx;}
				}
			}
			.title{
				font-weight: bold;color: #000;
			}
			.error-item{
				color:red;
			}
			.btn{
				width: 100%;
				.u-button{
					float: right;
				}
			}
		}
		.slot-content{
			padding:20rpx 30rpx;
		}
	}
</style>
